<template>
    <div id="data_logs_list_" class="container-fluid padding">
        <div>
            <el-form ref="searchDatas" :inline="true" :rules="rules"  :model="searchDatas" label-width="100px" class="padding">
                <el-form-item label="操作时间" prop="gxsj">
                    <el-date-picker
                            v-model="searchDatas.gxsj"
                            type="datetimerange"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions"
                            value-format="timestamp"
                            style="width: 715px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="操作者工号" prop="operatorYggh">
                    <el-input v-model="searchDatas.operatorYggh" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作者用户" prop="operatorUsername">
                    <el-input v-model="searchDatas.operatorUsername" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作者坐席" prop="operatorZuoxi">
                    <el-input v-model="searchDatas.operatorZuoxi" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作内容" prop="operatorContent">
                    <el-input v-model="searchDatas.operatorContent" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作真实ip" prop="operatorRIp">
                    <el-input v-model="searchDatas.operatorRIp" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作局域网IP" prop="operatorLIp">
                    <el-input v-model="searchDatas.operatorLIp" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="submitForm()">查询</el-button>
                    <el-button @click="$refs['searchDatas'].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
            <table class="layui-hide padding" id="dataLogsList"  lay-filter="dataLogsList"></table>
            <div id="dataLogsDialog" style="display: none" class="padding">
                <div v-for="item in dialogContent" :key="item.index" :style="'color:'+item.color" >
                    <div>（{{JSON.stringify(item.ip)}}）{{item.time}}：&nbsp;&nbsp;{{item.content}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatDateTime} from '@/common/js/util.js'
    import selectArea_ from '@/common/js/select_area.js'
    export default {
        name: "datalogs",
        data: function () {
            var that = this;
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                dialogContent:[],
                tableHeader:[//列表的头
                     {field: 'id',title: '序列号', align:'center',width:120}
                    , {field: 'ldhm',title: '来电号码', align:'center',width:120}
                    , {field: 'mtly',title: '媒体来源', align:'center',width:120}
                    , {field: 'bjhm',title: '被叫号码', align:'center',width:120}
                    , {field: 'zryy',title: '找人原因', align:'center',width:120}
                    , {field: 'zxcp',title: '质询产品', align:'center',width:120}
                    , {field: 'gtnr',title: '沟通内容', align:'center',width:120}
                    , {field: 'khmc',title: '客户名称', align:'center',width:120}
                    , {field: 'khxb',title: '客户性别', align:'center',width:120}
                    , {field: 'nld',title: '年龄段', align:'center',width:120}
                    , {field: 'zy',title: '职  业', align:'center',width:120}
                    , {field: 'sjhm',title: '手机号码', align:'center',width:120}
                    , {field: 'jtdh',title: '家庭电话', align:'center',width:120}
                    , {field: 'gzdh',title: '工作电话', align:'center',width:120}
                    , {field: 'sfcsqx',title: '省份/城市/区县', align:'center',width:240,templet: function(res){return that.$my_.getSfcsqx(selectArea_,res.sfcsqx);}}
                    , {field: 'xxdz',title: '详细地址', align:'center',width:120}
                    , {field: 'yzbm',title: '邮政编码', align:'center',width:120}
                    , {field: 'khzl',title: '客户质量', align:'center',width:120}
                    , {field: 'khly',title: '客户来源', align:'center',width:120}
                    , {field: 'khxq',title: '客户需求', align:'center',width:120}
                    , {field: 'hydj',title: '会员级别', align:'center',width:120}
                    , {field: 'khbz',title: '客户备注', align:'center',width:120}
                    , {field: 'zzjxsj',title: '最早进线时间', align:'center',width:240,templet: function(res){return formatDateTime(res.zzjxsj);}}
                    , {field: 'dhfsj',title: '待回访时间', align:'center',width:240,templet: function(res){return formatDateTime(res.dhfsj);}}
                    , {field: 'xgfpsj',title: '修改分配时间', align:'center',width:240,templet: function(res){return formatDateTime(res.xgfpsj);}}
                    , {field: 'operatorUsername',title: '操作的员工名称', align:'center',width:140}
                    , {field: 'operatorContent',title: '操作内容', align:'center',width:120}
                    , {field: 'gxsj',title: '操作时间', align:'center',width:240,templet: function(res){return formatDateTime(res.gxsj);}}
                    , {field: 'operatorLIp',title: '操作局域网IP', align:'center',width:180}
                    , {field: 'operatorYggh',title: '操作的员工工号', align:'center',width:180}
                    , {field: 'operatorZuoxi',title: '操作的员工坐席', align:'center',width:180}
                    , {field: 'operatorRIp',title: '操作的真实Ip', align:'center',width:240}
                    , {field: 'gnk',title: '功能块', align:'center',width:130}
                ],
                rules:{},
                searchDatas:{
                    operatorUsername:'',
                    operatorContent:'',
                    gxsj:'',
                    operatorLIp:'',
                    operatorYggh:'',
                    operatorZuoxi:'',
                    operatorRIp:'',
                    gnk:'',
                }
            }
        },
        created:function(){
            this.refreshTable(burl + 'data-logs/list')
        },
        methods:{
            submitForm:function(){
                this.refreshTable(burl + 'data-logs/list',this.searchDatas)
            },
            refreshTable:function (url,data) {
                layui.use('table',()=>{
                    layui.table.render({
                        elem: "#dataLogsList"
                        , url: url //数据接口
                        , toolbar: '' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        , title: ''
                        , where:{CrmHwzxHistorySearch:data}
                        , method:"post"
                        , height: 500
                        , limits: [10, 30, 60, 90]
                        , cols: [this.tableHeader]
                        , page: true //开启分页
                    })
                })
            }
        },
    }
</script>